<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>checked</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开关状态</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>开关颜色主题</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>primary</view>
				<view>开关自定义颜色，自定义颜色，如果设置则会覆盖主题色。格式#eee</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>无</view>
				<view>默认为开关模式，事件只提交开关状态。value为绑定值模式，启用后onValue必须设置，事件提交对应状态value值，使用严格比较</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number, Boolean</view>
				<view>false</view>
				<view>开关初始值，mode为value时有效，匹配onValue确定开关初始状态</view>
			</view>
			<view class="tr">
				<view>onValue</view>
				<view>String, Number, Boolean</view>
				<view>true</view>
				<view>开启值</view>
			</view>
			<view class="tr">
				<view>offValue</view>
				<view>String, Number, Boolean</view>
				<view>false</view>
				<view>关闭值</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>开关高度，需带单位</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>开关圆角，带单位，可选circle、square</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>开关预定尺寸</view>
			</view>
			<view class="tr">
				<view>buttonIcon</view>
				<view>String</view>
				<view>无</view>
				<view>按钮内图标，iconfont图标类名，优先于文字。使用slot会覆盖</view>
			</view>
			<view class="tr">
				<view>buttonText</view>
				<view>String</view>
				<view>无</view>
				<view>按钮内文字。使用slot会覆盖</view>
			</view>
			<view class="tr">
				<view>buttonClass</view>
				<view>String</view>
				<view>无</view>
				<view>按钮样式类名，仅对全局样式或穿透样式有效。使用slot会覆盖</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>值改变事件，按mode类型提交参数，check模式提交选中状态，value模式提交onValue或offValue</view>
			</view>
			<view class="tr">
				<view>@input</view>
				<view>事件</view>
				<view>	</view>
				<view>同change事件，用于model</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{'&lt;vi-switch checked="true">&lt;/vi-switch>'}}
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					<vi-switch checked class="mr-e1"></vi-switch>
					默认主题色
				</view>
				<view class="mb-sm">
					<vi-switch checked type="second" class="mr-e1"></vi-switch>
					第二主题色 type=second
				</view>
				<view class="mb-sm">
					<vi-switch checked type="third" class="mr-e1"></vi-switch>
					第三主题色 type=third
				</view>
				<view class="mb-sm">
					<vi-switch checked type="fourth" class="mr-e1"></vi-switch>
					第四主题色 type=fourth
				</view>
				<view class="mb-sm">
					<vi-switch checked type="fifth" class="mr-e1"></vi-switch>
					第五主题色 type=fifth
				</view>
				<view class="mb-sm">
					<vi-switch checked color="#ffc0cb" class="mr-e1"></vi-switch>
					自定义颜色 color=#ffc0cb
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					<vi-switch checked size="sm" class="mr-e1"></vi-switch>
					小尺寸 size=sm
				</view>
				<view class="mb-sm">
					<vi-switch checked size="md" class="mr-e1"></vi-switch>
					中尺寸 size=md
				</view>
				<view class="mb-sm">
					<vi-switch checked size="lg" class="mr-e1"></vi-switch>
					大尺寸 size=lg
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					<vi-switch checked radius="square" class="mr-e1"></vi-switch>
					方角 radius=square
				</view>
				<view class="mb-sm">
					<vi-switch checked :borderWidth="2" class="mr-e1"></vi-switch>
					边框宽度 :borderWidth=2
				</view>
				<view class="mb-sm">
					<vi-switch checked disabled class="mr-e1"></vi-switch>
					禁用 disabled=true
				</view>
				<view class="mb-sm">
					<vi-switch checked readOnly class="mr-e1"></vi-switch>
					只读 readOnly=true
				</view>
				<view class="mb-sm">
					<vi-switch checked class="mr-e1">
						<text class="iconfont icon-arr-right"></text>
					</vi-switch>
					使用slot
				</view>
				<view class="mb-sm">
					<vi-switch checked height="3em" class="mr-e1">
						<text class="iconfont icon-arr-right"></text>
					</vi-switch>
					自定高度 height=3em
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					<vi-switch checked :value="value1" class="mr-e1" @change="onChange1">
						<text class="iconfont icon-arr-right"></text>
					</vi-switch>
					正常模式 {{value1}}
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					<vi-switch checked :value="value2" onValue="打开" offValue="关闭" mode="value" class="mr-e1" @change="onChange2">
						<text class="iconfont icon-arr-right"></text>
					</vi-switch>
					value模式 {{value2}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:false,
				value2:"打开",
			}
		},
		methods: {
			onChange1(e){
				this.value1 = e
			},
			onChange2(e){
				this.value2 = e
			},
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
